<template>
  <div>
    <formProp
      ref="formrefs"
      :name="name"
      :model="form"
      :fields="fields"
      :options="options"
      :rules="rules"
    ></formProp>
    <el-button type="info" @click="success">完成</el-button>
  <div style="height:300px">
    <table-components  ref="tablerefs" :fields="tableFields" :arr="arr" :values='values' :api="api">
      <template #operation="{row}">
        {{row.a}}
      </template>
      <template #a="{row}">
        {{row.a}}1111
      </template>
    </table-components>
  </div>
  </div>
</template>
<script  lang="ts">
import { defineComponent, reactive, toRefs, ref,onMounted } from "vue";
import formProp from "../components/form/index.vue";
import tableComponents from "../components/table/index.vue";
import {backgroundList} from '../api/index'
interface nameType {
  name: string;
  form: formtype;
  arr:string[],
  values:any
}
interface formtype{
  username:string,
  password:string,
  number:number,
  select:string,
  date:string,
  time:string,
}
export default defineComponent({
  name: "App",
  components: {
    formProp,
    tableComponents,
  },
  setup() {
    const data: nameType = reactive({
      name: "我是父组件",
      values:{
        name:'123'
      },
      form: {
        username: "",
        password: "",
        number: 0,
        select: "",
        date: "",
        time: "",
      },
      arr:['a'],
      api:backgroundList,
    });
    const formrefs = ref();
    const tablerefs=ref()
    const fields = [
      {
        label: "用户名",
        prop: "username",
        placeholder: "请输入",
      },
      {
        label: "密码",
        prop: "password",
        type: "password",
        placeholder: "请输入",
      },
      {
        label: "数字输入框",
        prop: "number",
        type: "number",
        min: 0,
        placeholder: "请输入",
      },
      {
        label: "下拉框",
        prop: "select",
        type: "select",
        min: 0,
        placeholder: "请选择",
      },
      {
        label: "日期选择器",
        prop: "date",
        type: "date",
        placeholder: "请选择",
        format: "YYYY-MM-DD",
        valueFormat: "YYYY-MM-DD",
      },
      {
        label: "时间选择器",
        prop: "time",
        type: "time",
        placeholder: "请选择",
        format: "HH:mm:ss",
        valueFormat: "HH:mm:ss",
      },
      {
        label: "时间选择器",
        prop: "radio",
        type: "radio",
        placeholder: "请选择",
      },
    ];
    const tableFields=[
      {
        label:'名字',
        prop:'a'
      },
       {
        label:'职位',
        prop:'b'
      },
       {
        label:'工作',
        prop:'c'
      },
    ]
    const options = {
      select: [
        {
          label: "张三",
          value: "0",
        },
        {
          label: "李四",
          value: "1",
        },
      ],
      radio: [
        {
          label: "张三",
          value: "0",
        },
        {
          label: "李四",
          value: "1",
        },
      ],
    };
    const rules = {
      password: [
        {
          required: true,
          message: "Please input Activity name",
          trigger: "blur",
        },
        { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
      ],
    };
    const success = () => {
      formrefs.value.verification().then((res: boolean) => {
        console.log(res, 111);
      });
    };
    onMounted(()=>{
   tablerefs.value.init()
    })
    return {
      ...toRefs(data),
      fields,
      options,
      rules,
      success,
      formrefs,
      tableFields,
      tablerefs,
    };
  },
});
</script>
<style lang="scss">
</style>